<template>
    <div class="container-2 cleafix" @scroll="scrollUpdata" ref="container">
        <div class="item" v-for="(item, index) in listData" :key="index" ref="items">
            <div class="photo" ref="photos">
                <img :src="item.img" alt="">
            </div>
            <h3>{{ item.title }}</h3>
            <p>{{ item.desc }}</p>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref, reactive, nextTick } from 'vue'
import { generateRandomItems } from '@/utils/itemFactory'
const styleItems = generateRandomItems(100)
const container = ref(null);
const photos = ref(null);
const items = ref(null);
const listData = reactive([
    {
        title: 'DCDH WCOMM--1',
        desc: '百万团票,优化8折',
        img: '/photos/1.webp'
    },
    {
        title: 'William Chavez--2',
        desc: '百万团购,优化9折',
        img: '/photos/2.webp'

    },
    {
        title: 'Janice Graham--3',
        desc: '领劵后,立即20 只需12',
        img: '/photos/3.webp'
    },
    {
        title: 'Rosa Soto--4',
        desc: '立即参与万人团拼单',
        img: '/photos/4.webp'

    },
    // {
    //     title: 'DCDH WCOMM--5',
    //     desc: '百万团票,优化8折',
    //     img: '/photos/5.webp'

    // },
    // {
    //     title: 'William Chavez--6',
    //     desc: '百万团购,优化9折',
    //     img: '/photos/6.webp'

    // },
    // {
    //     title: 'Janice Graham--7',
    //     desc: '领劵后,立即20 只需12',
    //     img: '/photos/7.webp'

    // },
    // {
    //     title: 'Rosa Soto--8',
    //     desc: '立即参与万人团拼单',
    //     img: '/photos/8.webp'

    // },
    // {
    //     title: 'Rosa Soto--8',
    //     desc: '立即参与万人团拼单',
    //     img: '/photos/17.webp'

    // },


]);
const newItem = [
    {
        title: 'DCDH WCOMM--1',
        desc: '百万团票,优化8折',
        img: '/photos/9.webp'
    },
    {
        title: 'William Chavez--2',
        desc: '百万团购,优化9折',
        img: '/photos/10.webp'

    },
    {
        title: 'Janice Graham--3',
        desc: '领劵后,立即20 只需12',
        img: '/photos/11.webp'

    },
    {
        title: 'Rosa Soto--4',
        desc: '立即参与万人团拼单',
        img: '/photos/12.webp'

    },
    {
        title: 'DCDH WCOMM--5',
        desc: '百万团票,优化8折',
        img: '/photos/13.webp'

    },
    {
        title: 'William Chavez--6',
        desc: '百万团购,优化9折',
        img: '/photos/14.webp'

    },
    {
        title: 'Janice Graham--7',
        desc: '领劵后,立即20 只需12',
        img: '/photos/15.webp'

    },
    {
        title: 'Rosa Soto--8',
        desc: '立即参与万人团拼单',
        img: '/photos/16.webp'

    }
]
const init = async () => {
    await nextTick();
    waterFall();
}
onMounted(() => {
    // const items = document.querySelectorAll(".item");
    // const photos = document.querySelectorAll(".photo");
    // const container = document.querySelector(".container");
    // container.scrollTop;
    // container.scrollHeight;
    // container.clientHeight;
    console.log(items.value);
    console.log("dom更新");
    init();

});


// 创建标签
const scrollUpdata = () => {
    console.log("clientHeight:", container.value.clientHeight);
    if (
        container.value.scrollHeight <=
        container.value.scrollTop + container.value.clientHeight + 10
    ) {
        console.log("到底啦");
        getData();
    }
};

//  生成随机颜色
function generateRandomColor() {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    const color = `rgb(${r}, ${g}, ${b})`;
    return color;
}
// 生成随机高度
function randomHeight() {
    let height = Math.floor(Math.random() * 201) + 100;
    return height + "rem";
}

console.log(randomHeight());
let num = 0;
let currentIndex = 0;
// 添加数据
async function getData() {
    console.log("listData:", listData);
    console.log("items:", items.value);
    listData.push(...newItem);
    // const currentItems = items.value.slice(count);
    // console.log("currentItems", currentItems);
    // waterFall(items.value);
    currentIndex += 8;
    await nextTick();
    waterFall();

}
const beginIndex = ref(0);
// const allBox = reactive([]);
const heightArr = ref([]);

// boxHeight = 0
// minBoxHeight = 0,
// minIndex = 0;
// 瀑布流布局
function waterFall() {
    var allBox = items.value;
    console.log("allBox:", allBox);
    //1.2 获取其中一个的宽度
    var boxWidth = allBox[0].offsetWidth;
    //1.4 盒子列数
    var cols = 2;
    var top, left, height = 0;
    if (beginIndex.value == 0) heightArr.value = [];
    for (var i = beginIndex.value; i < listData.length; i++) {
        if (!allBox[i]) return;
        height = allBox[i].offsetHeight;
        //2.3 判断是否是第一行
        if (i < cols) {
            heightArr.value.push(allBox[i].offsetHeight);
            top = 0;
            left = i * boxWidth;
        } else {
            //剩余行做定位
            //2.4 取出数组中最矮盒子的高度
            let minBoxHeight = Math.min(...heightArr.value);
            //2.5 取出最矮盒子再数组中的索引
            let minIndex = heightArr.value.indexOf(minBoxHeight);
            //2.6 剩余子盒子的定位
            top = minBoxHeight;
            left = minIndex * boxWidth;
            //2.7 更新高度
            // heightArr.value[minIndex] = allBox[i].offsetHeight;
            heightArr.value[minIndex] += allBox[i].offsetHeight;

        }
        for (let i = 0; i < 3000; i++) {
            console.log(1);
        }

        allBox[i].style.position = "absolute";
        allBox[i].style.left = left + "rem";
        allBox[i].style.top = top + "rem";

    }

    beginIndex.value = listData.length;

}

function waterFall2(child, currentIndex) {
    //1、根据图片的列数来确定父盒子的宽度，父盒子居中
    //1.1 获取标签，父盒子和所有子盒子
    var allBox = child;
    console.log("allBox:", allBox);
    //1.2 获取其中一个的宽度
    var boxWidth = allBox[0].offsetWidth;
    //1.4 盒子列数
    var cols = currentIndex + 2;

    //2、子盒子定位（从第二行开始）
    //2.1 定义变量
    // var heightArr = [],
    //     boxHeight = 0,
    //     minBoxHeight = 0,
    //     minIndex = 0;
    //2.2 遍历所有的盒子
    for (let i = currentIndex; i < allBox.length; i++) {
        //剩余行做定位
        //2.4 取出数组中最矮盒子的高度
        minBoxHeight = Math.min(...heightArr);
        //2.5 取出最矮盒子再数组中的索引
        minIndex = heightArr.indexOf(minBoxHeight);
        //2.6 剩余子盒子的定位
        allBox[i].style.position = "absolute";
        allBox[i].style.left = minIndex * boxWidth + "rem";
        allBox[i].style.top = minBoxHeight + "rem";
        //2.7 更新高度
        heightArr[minIndex] += allBox[i].offsetHeight;

    }
}
</script>
<style lang="css" scoped>
* {
    padding: 0;
    margin: 0;
    border: none;
    box-sizing: border-box;
}

.container-2 {
    position: relative;
    left: 2.5vw;
    width: 90vw;
    overflow: scroll;
    height: 100vh;
    background-color: #fff;

}

.item {
    float: left;
    width: 50%;
    text-align: center;
    margin-bottom: 10rem;
    background-color: #fff;
}

.cleafix:after {
    content: ".";
    display: block;
    clear: both;
    overflow: hidden;
    height: 0;
}

.photo {
    margin: 0 auto;
    width: 90%;
}

.photo img {
    width: 100%;
}

h3 {
    font-size: 16rem;
    color: #cdcccc;
    background-color: #fff;
}

p {
    font-size: 12rem;
    color: #d3d3d3;
    background-color: #fff;
    margin-bottom: 20rem;
}
</style>